<template>
<div>
    <!-- 查询 -->
    <el-popover placement="bottom-start" width="770" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
        <el-form :inline="true" :model="searchList" label-width="75px" class="demo-ruleForm">
            <el-form-item label="浆员卡号" style="margin-bottom: 5px;"><el-input v-model="searchList.cardId" style="width: 100px;"></el-input></el-form-item>
            <el-form-item label="浆员姓名" style="margin-bottom: 5px;"><el-input v-model="searchList.providerName" style="width: 100px;"></el-input></el-form-item>
            <el-form-item label="机器编号" style="margin-bottom: 5px;"><el-select v-model="searchList.machineNo" style="width: 100px;"><el-option value="" label="【空】"></el-option><el-option v-for="item in machineData" :key="item.id" :value="item.id" :label="item.name"></el-option></el-select></el-form-item>
            <el-form-item label="分配方式" style="margin-bottom: 0;"><el-select v-model="searchList.allotType" style="width: 100px;"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData15" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
            <el-form-item label="分配时间" style="margin-bottom: 0;"><el-date-picker v-model="searchList.time" type="daterange" style="width: 295px;" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right"></el-date-picker></el-form-item>
            <el-button type="primary" @click="searchData" style="margin-left: 14px;">提交</el-button>
        </el-form>
        <el-button slot="reference" type="primary">查询</el-button>
    </el-popover>

    <!-- 表格 -->
    <el-table :data="tableData" stripe border class="company-table" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass" v-loading="loading">
        <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
        <el-table-column prop="cardId" label="卡号" sortable min-width="110"></el-table-column>
        <el-table-column prop="machineNoName" label="机器编号" sortable min-width="120"></el-table-column>
        <el-table-column prop="providerNoName" label="献浆员" sortable min-width="120"></el-table-column>
        <el-table-column prop="allotTypeName" label="分配方式" sortable min-width="130"></el-table-column>
        <el-table-column prop="allotDate" label="分配时间" sortable min-width="180"></el-table-column>
        <el-table-column prop="creatorName" label="创建护士" sortable min-width="120"></el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
</div>

</template>

<script>
import api from '@/axios/api.js';
    export default {
        data() {
            return {
                tableHeight: document.documentElement.clientHeight - 160,
                tableData: [],
                loading:false,
                machineData:[],/** 机器编号*/
                codeData15:[],/**分配方式 */
                searchList: { // 查询
                    providerName:null,
                    cardId:null,
                    startAllotDate:'',
                    endAllotDate:'',
                    machineNo:null,
                    registerNo:null,
                    allotType:null,
                    time:'',
                },
                //分页相关参数
                pagination:{
                    currentPage:1,
                    pageSize:10,
                    total:0
                }
            }
        },
        created() {
            let self=this;
            this.getData();
            api.getCodeData(15).then(res=>{
                self.codeData15=res.content;
            })
            api.getMachineData().then(res=>{
                self.machineData=res.content;
            })
        },
        methods: {
            getData(data) {
                let _this = this;
                let list = {
                    pageSize: _this.pagination.pageSize,
                    currentPage: _this.pagination.currentPage,
                    providerName:_this.searchList.providerName,
                    cardId:_this.searchList.cardId,
                    startAllotDate:_this.searchList.time ? _this.timestampToTime(_this.searchList.time[0]).substr(0,10) : "",
                    endAllotDate:_this.searchList.time ? _this.timestampToTime(_this.searchList.time[1]).substr(0,10) : "",
                    machineNo:_this.searchList.machineNo,
                    registerNo:_this.searchList.registerNo,
                    allotType:_this.searchList.allotType,
                };
                _this.loading=true;
                api.providerAllot(list).then(res=>{
                    _this.loading=false;
                    _this.tableData = res.content.records;
                    _this.pagination.total= res.content.total;
                },error=>{
                     _this.loading=false;
                })
            },
            searchData() {//搜索
                this.pagination.currentPage=1;
                this.getData();
            },
            handleSizeChange(size) {/**分页-每页显示尺寸 */
                this.pagination.currentPage=1;
                this.pagination.pageSize = size;
                this.getData();
            },
            handleCurrentChange(currentPage) {/**分页-跳转第几页 */
                this.pagination.currentPage = currentPage;
                this.getData();
            },

        }
    }
</script>

<style scoped>

</style>
